<template>
  <div
    class="card page-project-list pages"
    id="projectProcess"
  >
    <div class="page-search">
      <a-form
        class="form-inline"
        :form="searchForm"
      >

        <a-form-item label="时间范围">
          <a-range-picker
            data-key="s,e"
            valueFormat="YYYY-MM-DD"
            v-decorator="['project']"
          />
        </a-form-item>
        <a-form-item label="采购状态">
          <DictSelect
            lxjp="approvalState"
            v-decorator="['approvalState']"
            placeholder="请选择"
          />
        </a-form-item>
        <a-form-item class="search-buttons">
          <a-button
            type="primary"
            v-click='{func:handleSearch,time:1000,data:{a:1}}'
          >查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <!-- 表格 -->
    <standard-table
      ref="tableChildren"
      :pagination="false"
      :columns="columns"
      :bordered=true
      :dataSource="dataSource"
      @change="onChange"
    >
      <span slot="tags">
        313213
      </span>
    </standard-table>

  </div>
</template>
<script>
import GlobalMixin from '@/mixins/global'
import { columnsData } from './cloumns.js'
import { tableList } from '@/api/table'
import Test from './HeadInfo'
import frommybtns from './fromMybtns'
import backOpinion from './backOpinion'
export default {
  name: 'ProjectList',
  mixins: [GlobalMixin],
  data () {
    return {
      searchForm: this.$form.createForm(this),
      dataSource: [],
      sortedInfo: null,
      changeIndex: 0,
      serchParams: { pageNum: 1, pageSize: 10 } // 搜索条件
    }
  },
  computed: {
    columns () {
      let { sortedInfo } = this
      sortedInfo = sortedInfo || { order: 'descend', columnKey: 'pdepartment' } // descend  //ascend
      return columnsData(this.$createElement, sortedInfo, this)
    }
  },
  beforeMount () {
    // 获取列表
    this.fetchList(this._getTableParams(this.searchForm))
  },

  methods: {
    // 获取列表
    fetchList () {
      this.serchParams = { ...this.serchParams }// this.$PROJECTID
      tableList(this.serchParams).then(res => {
        this.dataSource = res.list || []
        // 处理分页情况
        const { pageNum, pageSize } = this.serchParams
        this.PAGINATION = {
          total: res.total || 0,
          pageNum,
          pageSize
        }
      })
    },
    // 搜索
    handleSearch (data) {
      console.log(data) // 指令处理的传参，不需要可以删除
      this.serchParams = this._getTableParams(this.searchForm, { pageNum: 1 })
      console.log(this.serchParams) // 获取搜索得参数
      this.fetchList()
    },
    // 切换数据
    onChange (changeParams, sort) {
      const { order } = sort
      sort.order = order === 'ascend' ? 'descend' : order === undefined ? 'ascend' : 'descend'
      this.sortedInfo = sort
      this.serchParams = { ...this.serchParams, ...changeParams }
      this.fetchList()
    },
    // 弹窗二
    boxShow2 (record) {
      this.$drawer(Test,
        // modal props
        { title: '弹窗二', move: true },
        // component props
        { id: record.id, msg: '确定或者取消无任何交互' }
      )
    },
    // 弹窗三
    boxShow3 (record) {
      let tem = `<div>
        <h2>自定义标题</h2>
        <p>是否确定查看自定义数据</p>
      </div>`
      this.$drawer(tem,
        // modal props
        { title: '弹窗三' }
      )
    },
    // 弹窗四
    boxShow4 (record) {
      this.$drawer(backOpinion,
        // modal props
        { title: '弹窗四' },
        // component props
        { msg: '确定按钮做简单操作，没有组件之间的交互使用!!!!!!!!!!!' },
        // clicks
        {
          onOK: () => new Promise(resolve => {
            resolve(true)
          })
        }
      )
    },
    // 弹窗5
    boxShow5 (record) {
      this.$drawer(frommybtns,
        // modal props
        { title: '弹窗一', footer: '' },
        // component props
        {
          ok: (q, dialogCompoents) => {
            // 全部关闭
            dialogCompoents.modalAllClose()
            // 关闭当前
            dialogCompoents.selfClose()
          }
        }
      )
    },
    // 重置
    handleReset () {
      this.sortedInfo = null
      this.searchForm.resetFields()
      this.serchParams = this._getTableParams(this.searchForm)
      this.fetchList()
    }
  }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
